<template>
  <div class="hot">
    <div class="hot-left">
      <div class="left-counter">
        <div class="limit">限时抢购</div>
        <div class="count">
          距结束 <span>02</span>:<span>04</span>:<span>08</span>
        </div>
      </div>

      <div
        class="left-content"
        v-for="item of hotContentList"
        :key="item.id"
      >
        <div class="content-img">
          <img :src="item.imgUrl">
        </div>
        <div class="content-desc">{{item.desc}}</div>
      </div>

      <div
        class="left-prise"
        v-for="item of hotPriseList"
        :key="item.id"
      >
        <div class="prise-sale">
          限量<span>{{item.num}}份</span>
        </div>
        <div class="prise-num">
          <span>￥</span>{{item.prise}}<span>起</span>
        </div>
      </div>

    </div>
    <div class="hot-right">
      <div
        class="right-item"
        v-for="item of hotTrendList"
        :key="item.id"
      >
        <div class="item-desc">
          {{item.desc}}
          <p>{{item.crite}}</p>
        </div>
        <div class="item-img">
          <img class="img" :src="item.imgUrl">
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
      props:["hotContentList","hotPriseList","hotTrendList"],
        name: "homeHot",
      data(){
          return{



          }
      }
    }
</script>

<style lang="stylus" scoped>
@import "../../../assets/style/mixins.styl"
  .hot
    clear:left
    border-top:.2rem solid #eee
    overflow:hidden
    height:0
    padding-bottom:29.5%
    background:#fff
    border-bottom :0.1rem #efefef solid

    .hot-left
      overflow:hidden
      width:50%
      height:0
      padding-bottom:50%
      float:left
      backfround:#fff
      .left-counter
        overflow:hidden
        width:100%
        height:0
        padding-bottom:14.15%
        .limit
          font-weight:bold
          color:red
          float:left
          padding:.2rem
       .count
         float:right
         padding:0.2rem 0.1rem
         font-size :12px
         .count span
            background:#000
            color:#fff
      .left-content
        overflow:hidden
        width:100%
        height:0
        padding-bottom:31.7%
        float:left
        display:flex
        min-width:0
        .content-img
          overflow:hidden
          width:31.7%
          height:0
          padding-bottom:31.7%
        .content-img>img
          max-width:100%
          padding:.1rem
        .content-desc
          overflow:hidden
          width:68.3%
          font-size :0.2rem
          padding-bottom:31.7%
          margin:0.2rem 0.1rem
          ellipsis()
          line-height:.32rem
      .left-prise
        overflow:hidden
        width:100%
        height:0
        padding-bottom:14.15%
        .prise-sale
          font-size :0.2rem
          float:left
          font-weight:bold
          margin-left:.1rem
          margin-top:.1rem
        .prise-sale > span
          display:inline-block
          color:#aaa
        .prise-num
          float:right
          margin:0.1rem 0.2rem
          color:red
    .hot-right
      overflow:hidden
      width:49%
      height:0
      padding-bottom:49%
      border-left:.05rem solid #eee
      background:#fff
      .right-item
        position:relative
        overflow:hidden
        width:100%
        height:0
        padding-bottom:29.5%
        background:#fff
        border-bottom:.03rem #eee solid
        .item-desc
          padding:.2rem
          font-weight:bold
        .item-desc > p
          color:#ccc
          margin-top:.2rem
        .img
          position:absolute
          top:0
          right:0
          max-width:100%
          max-height:100%
</style>
